Selecting the right plot type

Describing data vs. chart relationship

Muze automatically decides the chart type from the data. It does that based on the type of the encoding fields.

Vertical Bars

Encoding	Type
x	categorical
y	continuous

Bar Chart with color encoding

Encoding	Type
x	categorical
y	continuous
color	continuous

Stacked Bar

Encoding	Type
x	categorical
y	continuous
color	categorical

Horizontal Bar

Encoding	Type
x	continuous
y	categorical

Line

Encoding	Type
x	temporal
y	continuous

Multi Line

Encoding	Type
x	temporal
y	continuous
color	categorical

Scatter

Encoding	Type
x	continuous
y	continuous

Plot types supported in Muze

Muze supports a large number of plot types which are also called marks.

This is the list of all plot types supported.

• bar
• line
• area
• point
• arc
• text
• tick

How to do grouped charts?

Grouped bars can be created using transform configuration in layers.

For creating grouped bars / line / areas, set the transform type to group.

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Horsepower"])
  .columns(["Origin"])
  .color("Cylinders")
  .data(data)
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
    },
  ])
  .title("Grouped bar chart")
  .subtitle("Horsepower by Origin coloured by Cylinders")
  .mount("#chart");

Some More Examples

Dimention vs. Dimension

In Muze, plotting a dimension vs. a dimension field automatically creates a heatmap chart.

Code for the example below :

muze.canvas().rows(["Cylinders"]).columns(["Origin"]).color("Acceleration");

// Adding a color field so that each rectangle has a different color derived from the Acceleration value

  const { muze, getDataFromSearchQuery, env } = viz;
  const data = getDataFromSearchQuery();

  muze.
    .canvas()
    .rows(["Cylinders"])
    .columns(["Origin"])
    .color('Acceleration')
    .data(data)
    .title("Heatmap")
    .subtitle("Origin vs. Cylinders colored by Acceleration")
    .config({
        axes: {
          x: {
            padding: 0.01
          },
          y: {
            padding: 0.02
          }
        }
    })
    .mount('#chart');

Notice that we also added a padding value to the x and y axis which ranges from 0 to 1, which controls the spacing between the bars.

...
.config({
  axes: {
    x: {
     padding: 0.02
    },
    y: {
     padding: 0.02
    }
  }
});
...

Measure vs. Dimension

Plotting a measure vs. dimension creates a bar chart.

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Acceleration"])
  .columns(["Cylinders"])
  .data(data)
  .title("Bar chart")
  .mount("#chart");